<template>
  <div class="app-container">
    <el-table border :data="ipqclineList">
      <el-table-column label="检测项名称" width="150px" align="center" prop="indexName" />
      <el-table-column label="检测项类型" width="100px" align="center" prop="indexType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_index_type" :value="scope.row.indexType"/>
        </template>
      </el-table-column>
      <el-table-column label="检测工具" width="120px"align="center" prop="qcTool" />
      <el-table-column label="检测要求"width="160px" align="center"  prop="checkMethod"  :show-overflow-tooltip="true"/>
      <el-table-column label="标准值" width="100" align="center" prop="standerVal" >
        <template v-slot="scope">
          <span v-if="scope.row.indexType == 'QUALITATIVE'">--</span>
          <span v-else>{{scope.row.standerVal}}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位" width="100"  align="center" prop="unitOfMeasure" >
        <template v-slot="scope">
          <span v-if="scope.row.indexType == 'QUALITATIVE'">--</span>
          <span v-else>{{scope.row.unitOfMeasure}}</span>
        </template>
      </el-table-column>
      <el-table-column label="误差上限" width="100"  align="center" prop="thresholdMax" >
        <template v-slot="scope">
          <span v-if="scope.row.indexType == 'QUALITATIVE'">--</span>
          <span v-else>{{scope.row.thresholdMax}}</span>
        </template>

      </el-table-column>
      <el-table-column label="误差下限"  width="100" align="center" prop="thresholdMin" >
        <template v-slot="scope">
          <span v-if="scope.row.indexType == 'QUALITATIVE'">--</span>
          <span v-else>{{scope.row.thresholdMin}}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-for="(col, index)  in realValueColumns"
        :key="col.prop"
        :label="col.label"
        :prop="col.prop"
        :width="col.width"
        align="center"
      >
        <template v-slot="scope">
          <el-input-number v-model="scope.row.realValues[`${index}`]" @change="computeValue()" size="mini" v-if="scope.row.indexType!='QUALITATIVE'&&optType!='view'"/>
          <span v-if="scope.row.indexType!='QUALITATIVE'&&optType=='view'">{{ scope.row.realValues[`${index}`] }}</span>
          <el-switch v-if="scope.row.indexType=='QUALITATIVE'&&optType!='view'"  v-model="scope.row.realValues[`${index}`]" @change="computeValue()"
                     :active-value="1" :inactive-value="0" active-color="green" active-text="合格"/>
          <span v-if="scope.row.indexType=='QUALITATIVE'&&optType=='view'&&scope.row.realValues[`${index}`]==1">合格</span>
          <span v-if="scope.row.indexType=='QUALITATIVE'&&optType=='view'&&scope.row.realValues[`${index}`]==0">不合格</span>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: "Ipqcline",
  dicts: ['mes_index_type'],
  props: {
    ipqcId: null,
    optType: undefined,
    ipqclineListFromParent: null,
    realValueColumnsFromParent:{
      type: Array,
      default: function() {
        return []
      }
    }
  },
  components: {},
  data() {
    return {
      // 过程检验单行表格数据
      ipqclineList:this.ipqclineListFromParent,
      realValueColumns:this.realValueColumnsFromParent,
    };
  },
  created() {
  },
  methods: {
    computeValue(){
      this.$emit('computeValue',this.ipqclineList)
    }
  }
};
</script>
